<template>
	<view class="content">
		<view style="width: 100%;">
			<u-index-list :scrollTop="scrollTop"  :active-color="'#3CC51F'"  :index-list="vuex_contactIndex">
				<view v-for="(item, index) in myFirendList" :key="index" style="width: 100%;">
					<u-index-anchor :index="item.firstLetter"/>
						<view v-for="friend in item.friends" :key="friend.id" class="list-cell" @tap="checkBoxChange(friend)">
							<view>
                <image src="/static/svg/mention-check.svg" style="width: 42rpx; height: 42rpx; margin-right: 24rpx; " v-if="friend.isChecked"/>
                <image src="/static/svg/mention-uncheck.svg" style="width: 42rpx; height: 42rpx; margin-right: 24rpx; " v-else/>
							</view>
							<view>
								<u-image :src="friend.avatar"  mode="aspectFill" width="80" height="80" border-radius="12">
									<view slot="error">
										<u-image src="@/static/image/chat/defaultPhoto.png"  mode="aspectFill" width="80" height="80" border-radius="12">
										</u-image>
									</view>
								</u-image>
							</view>
							<view  class="list-cell-name">{{friend.name}}</view>
						</view>
				</view>
			</u-index-list>
      <u-empty v-if="!vuex_contactIndex.length" text="你还没有好友可以发起群聊" mode="list"></u-empty>

      <div style="height: 150rpx;"></div>
      <div class="fixed">
        <u-button type="success" @tap="launchChatGroup" :disabled="selectedUser.size === 0">确定</u-button>
      </div>
    </view>
  <create-group-pop ref="groupPop"
        :windowHeight="windowHeight"
        :groupModelFlag="groupNameModal"
        @submitCreate="buildChatGroup"
        @closeModel="closeModel">
  </create-group-pop>
	</view>
</template>

<script>
import searchInput from '@/components/searchInput/index.vue';
import createGroupPop from '@/components/create-group-pop/create-group-pop.vue';
export default {
	components:{searchInput,createGroupPop},
	data() {
		return {
			scrollTop: 0,
			myFirendList:[],
			selectedUser:new Set(),
			currentUserId:'',
			groupNameModal:false,
			chatGroupName:'',
			windowHeight:0,
		};
	},
	
	created () {
		this.windowHeight=this.$u.sys().windowHeight;
	},
	
	async onLoad (options) {
		this.currentUserId=this.vuex_userInfo.id;
    await this.$store.dispatch('refreshContactList')
    console.log(this.vuex_contactListData, 1)
    this.myFirendList = this.vuex_contactListData.filter(s => {
      if (s.friends.length === 1 && s.friends[0].id === 1) return false
      return true
    }).map(s => ({
      ...s,
      friends: s.friends.filter(s => s.id !== 1).map(q => {
        const isChecked = options.defaultCheck ? Number(options.defaultCheck) === q.id : false
        if (isChecked) {
          this.selectedUser.add(q.id)
        }
        return {
          ...q,
          isChecked
        }
      })
    }))
	},
	
	methods: {
		//初始化通讯录列表
		getMyFriendList:function(){
		   let that=this;
		   let param={};
		    that.$u.api.imUser.getMyFriendList(param).then(res => {
				if(res.code==200){
					//console.log("获取通讯录结果",res);
					let data=res.data;
					let indexList= data.myFriendsIndexList;
					if(indexList!=null&&indexList!=undefined){
						that.indexList=indexList;
					}
					let myFriendList= data.myFriendList;
					if(myFriendList!=null&&myFriendList!=undefined){
						that.myFirendList=myFriendList;
					}
				}
			})	   
		},
		
	    //监听选中人员
		checkBoxChange:function(e){
			let friendId= e.id;
			let isChecked=e.isChecked;
			if(!isChecked){
				this.selectedUser.add(friendId);
			}else{
				if(this.selectedUser.has(friendId)){
					this.selectedUser.delete(friendId);
				} 
			}
      e.isChecked = !e.isChecked
			// this.customNavBarStatusChange();
		},
		//发起群聊
		launchChatGroup:function(){
			let that=this;
			if(that.selectedUser.size<1){
				console.log("没有选中人员")
        this.$u.toast("请选择人员");
				return;
			}
			else{
				that.groupNameModal=true;
				// that.customNavBarStatusChange();
			}
		},
		closeModel:function(){
			this.groupNameModal=false;
		},
		buildChatGroup:function(newGroup){
			let that=this;
			let selectedFriends=[];
			that.selectedUser.forEach((item) => {
			  selectedFriends.push(item);
			})
			selectedFriends.push(that.currentUserId);
			console.log("选择人员",selectedFriends);
			that.globalUtil.utilLoading("正在发起群聊...",true);
			let obj={user_ids:selectedFriends, is_multi: 'GROUP'};
			let param=Object.assign(obj,newGroup);
			console.log("发起群聊参数",param);
			that.$u.api.chatGroup.launchChatGroup(param).then(res => {	
			  console.log("发起群聊响应结果",res);
			  if (res!=null&&res.data!=null&&res.code===200) {
			       that.globalUtil.utilAlert("创建成功!","success");  
				   that.selectedUser.clear();
				   let chatGroupId=res.data.id;
				   let param="?chatGroupId="+chatGroupId;
				   let _url="/pages/chat/chatGroup/chatting";
				   let chatUrl=_url+param;
				   uni.redirectTo({
				     url: chatUrl,
				     success() {
				     
				     }
				   });
				   return;
			  }else{
			    uni.hideLoading();
			    that.globalUtil.utilAlert("发起聊天失败!","error");
			    return;
			  }
			}).catch(res => {
			  uni.hideLoading();
			  that.globalUtil.utilAlert("发起聊天失败!","error");
			  console.log("会话列表加载触发异常",res);
			})
		},
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 30rpx; 
	}
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 28rpx;
		line-height: 48rpx;
		background-color: #fff;
		align-items: center;
		image {
			width: 76rpx;
			height: 76rpx;
			border-radius: 12rpx;
			flex: 0 0 76rpx;
		}
		&-name{
			padding-left: 20rpx;
		}
	}

  .fixed{ position: fixed; bottom: 0; left: 0; right: 0; padding: 24rpx;}
}
</style>
